<template>
	<div class="app-container">
		<el-card class="box-card">
			<div>{{value_1.configName}}:</div>
			<el-input class="row-input" v-model="value_1.configValue" placeholder="请输入参数"></el-input>
			<el-button style="margin-left: 20px;" type="primary" @click="submit(value_1)">确定</el-button>
		</el-card>

		<el-card class="box-card">
			<div>{{value_2.configName}}:</div>
			<el-input class="row-input" v-model="value_2.configValue" placeholder="请输入参数"></el-input>
			<el-button style="margin-left: 20px;" type="primary" @click="submit(value_2)">确定</el-button>
		</el-card>

		<el-card class="box-card">
			<div>{{value_3.configName}}:</div>
			<el-input class="row-input" v-model="value_3.configValue" placeholder="请输入参数"></el-input>
			<el-button style="margin-left: 20px;" type="primary" @click="submit(value_3)">确定</el-button>
		</el-card>
	</div>
</template>

<script>
	import {
		getConfig,
		updateConfig,
	} from "@/api/system/config";


	export default {
		data() {
			return {
				// 加油费核算比例ID:100
				value_1: {},
				// 工作日出差餐补ID:101
				value_2: {},
				// 休息日出差餐补ID:102
				value_3: {},
			}
		},
		created() {
			this.getConfigInfo();
		},
		methods: {
			// 获取配置信息
			getConfigInfo() {
				getConfig(100).then(val1 => {
					this.value_1 = val1.data;
				});
				getConfig(101).then(val2 => {
					this.value_2 = val2.data;
				});
				getConfig(102).then(val3 => {
					this.value_3 = val3.data;
				});
			},
			// 提交
			submit(form) {
				updateConfig(form).then(response => {
					this.$modal.msgSuccess("修改成功");
					this.getConfigInfo();
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .box-card {
		margin-bottom: 20px;

		.el-card__body {
			display: flex;
			align-items: center;
		}

		.row-input {
			width: 180px;
			margin-left: 20px;
		}
	}
</style>